<template>
  <div class="app">
    <visual-editor v-model="jsonData" :config="visualConfig" :formData="formData" :customProps="customProps">
      <el-button v-if="formData.food === 'dangao'">自定义的按钮</el-button>
      <el-tag v-else>自定义的标签</el-tag>
    </visual-editor>
    <div style="text-align: center">
        {{JSON.stringify(formData)}}
    </div>   
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { visualEditor } from '@/packages/visual-editor.tsx'
import {visualConfig} from "@/visual.config";
import jsonData from './data.json'
export default defineComponent({
  name: 'App',
  components: {
    visualEditor
  },
  data() {
    return {
      visualConfig,
      jsonData,
      formData: {
        username: 'admin'
      },
      customProps: {
        subBtn: {
            onClick: () => {
                this.$notify({message: '执行表单数据校验以及提交到服务器的动作'})
            }
        },
        mySelect: {
            onChange: (val) => {
              console.log('val', val)
                this.$notify({message: `食物发生变化:${val}`})
                this.formData.acctType = null
            }
        },
      },
    }
  }
});
</script>

<style lang="scss">
.app {
  padding-bottom: 300px;
}
</style>
